<template>
  <div >
    <el-dialog
      title="优惠券申请"
      :visible.sync="dialogFormVisible"
      append-to-body="true"
      @close ="close"
    >
      <el-form :model="dialogList">
        <el-form-item label="优惠券名称" :label-width="formLabelWidth">
          <span>{{dialogList.couponName ||''}}</span>
        </el-form-item>
        <el-form-item label="优惠力度" :label-width="formLabelWidth">
         <span
            class="typeface_color2"
            v-if="dialogList.couponType == '直抵券'"
            >{{
              dialogList.couponValues &&
              dialogList.couponValues.length > 0
                ? dialogList.couponValues["0"]
                : 0
            }}</span
          >
          <span
            class="typeface_color2"
            v-if="dialogList.couponType == '折扣券'"
            >{{
              dialogList.couponValues &&
              dialogList.couponValues.length > 0
                ? dialogList.couponValues["0"]
                : 0
            }}折</span
          >
          <span
            class="typeface_color2"
            v-if="dialogList.couponType == '满减券'"
            >满{{
              dialogList.couponValues &&
              dialogList.couponValues.length > 0
                ? dialogList.couponValues["0"]
                : 0
            }}
            <span
              >减{{
                dialogList.couponValues &&
                dialogList.couponValues.length > 0
                  ? dialogList.couponValues["1"]
                  : 0
              }}</span
            ></span
          >
          <span
            class="typeface_color2"
            v-if="dialogList.couponType == '兑换券'"
            >{{
              dialogList.couponValues &&
              dialogList.couponValues.length > 0
                ? dialogList.couponValues["0"]
                : 0
            }}</span
          >
        </el-form-item>
        <el-form-item label="使用说明" :label-width="formLabelWidth">
          <span class="textStyle" v-html="dialogList.couponRemark" ></span>
        </el-form-item>
        <el-form-item label="可用库存" :label-width="formLabelWidth">
         <span>{{ dialogList.couponResult == null ? '0' : dialogList.couponResult.stockNum}} 张</span>
        </el-form-item>
        <el-form-item label="申请数量" :label-width="formLabelWidth">
          <el-input placeholder="请输入数量" class="apple_num"   v-model="form.applyNum "></el-input> 张 
          <p style="fontSize:12px;color:#D7DAE2; margin:0; padding:0;">
            申请数量不可大于 "可用库存" ;
          </p>
        </el-form-item>
        <el-form-item label="备注信息" :label-width="formLabelWidth">
          <el-input
            v-model="form.remark"
            type="textarea"
            class="remarks_msg"
            placeholder="备注"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-btn">
        <div class="cancel" @click="cancel">取消</div>
        <div class="determine"  @click="sureApply" style="color:#6289FE;">确定</div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getCouponInfo, getApply } from '../../../service/api/index'
export default {
  props: {
    dialogFormVisible: {
      type: Boolean,
      default: false
    },
    couponId:{
      type: String,
      default: ''
    }
    
  },
  data() {
    return {
      form: {
        remark: "",
        couponId: "",
        applyNum: "",
      },
      formLabelWidth: "120px",
      dialogList: {}
    };
   
  },
  watch: {
    couponId(newVal, oldVal) {
      this.couponId = newVal
      this.form.couponId = newVal
    }
  },
  created(){
    this.getdialogInit()
  },
  methods: {
    cancel() {
      this.dialogFormVisible = false;
      this.$emit("cancel", this.dialogFormVisible);
    },
    close(){
       this.dialogFormVisible = false;
       this.$emit("close", this.dialogFormVisible);
      //  console.log(1111)
    },
    async getdialogInit(){
      console.log(this.couponId)
      const res = await getCouponInfo({
        couponId: this.couponId || ''
      })
      // console.log(res)
      this.dialogList = res.data
    },
    async sureApply(){
      if(this.form.applyNum == '0' || !this.form.applyNum ) {
        this.$message({
          type: "error",
          message: "申请数量不可为空"
        });
        return false
      }

      let stockNum = this.dialogList.couponResult ?  this.dialogList.couponResult.stockNum : 0
      if(this.form.applyNum > stockNum) {
        this.$message({
          type: "error",
          message: "申请数量不可大于可用库存"
        });
        return false
      }

      const res = await getApply({
        ...this.form,
        couponId: this.couponId
      });
      if (res.code == 0) {
        this.dialogFormVisible = false;
        this.$emit("sureApply", this.dialogFormVisible);
        this.$message({
          type: "success",
          message: "申请成功"
        });
        
      } else {
        this.$message({
          type: "error",
          message: res.errMsg
        });
        //  this.dialogFormVisible = true;
      }
      
    }
  }
};
</script>
<style lang="scss" scoped>

/deep/.textStyle p{
  display: block;
  margin: 0;
  padding: 0;
}
.el-form-item {
  margin-bottom: 0px;
}
/deep/.el-dialog {
  width: 600px;
  z-index: 4000;
}
/deep/.el-dialog__footer {
  padding: 0;
  text-align: left;
}
.cancel {
  width: 300px;
  height: 16px;
  line-height: 16px;
  text-align: center;
  border-right: 1px solid #d7dae2;
  margin-top: 20px;
  color: #43425D;
}
.determine {
  width: 300px;
  height: 16px;
  line-height: 16px;
  text-align: center;
  margin-top: 20px;
  color: #43425D;
}
.dialog-btn {
  width: 600px;
  height: 52px;
  line-height: 52px;
  font-size: 16px;
  background: #f5f6fa;
  display: flex;
  justify-content: space-around;
}
/deep/.remarks_msg {
  .el-input__inner {
    width: 400px !important;
    height: 70px !important;
  }
}
.apple_num {
  width: 200px;
  height: 32px;
  line-height: 32px;
}
</style>
